<template>
	<ucs-svg :width="size" :height="size" :src="iconSvg" />
</template>
<script setup lang="uts">
	/**
	 * @description 《宝塔》图标
	 * @tutorial https://ucs.cloudsimpler.com/library/ucs-iconPark
	 * @property {Number} size 图标大小
	 * @property {Number} strokeWidth 线段粗细
	 * @property {String} theme 图标大小
	 * @property {Array<string>} fill 图标颜色，["外部描边颜色","外部填充颜色","内部描边颜色","内部填充颜色"]
	 * @property {String} strokeLinecap 图标大小
	 * @property {String} strokeLinejoin 图标大小
	 */
	import { colors, IiconParkProps } from "../../mixins/iconParkMixin.uts";
	import { computed } from "vue";
	
	const props = withDefaults(defineProps<IiconParkProps>(), {
		size: 24,
		strokeWidth: 4,
		theme: 'outline',
		fill: ["#000000"],
		strokeLinecap: 'round',
		strokeLinejoin: 'round'
	});

	const iconSvg = computed(() : string => {
		return `<?xml version="1.0" encoding="UTF-8"?><svg width="${props.size}" height="${props.size}" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 16H30C30 16 32.4241 18.6725 34.5 19.4286C35.8013 19.9025 38 20 38 20C38 20 36.758 20.7747 35.9 21.1429C34.8147 21.6085 33 22 33 22H24H15C15 22 13.1853 21.6085 12.1 21.1429C11.242 20.7747 10 20 10 20C10 20 12.1987 19.9025 13.5 19.4286C15.5759 18.6725 18 16 18 16Z" fill="${colors(props.theme, props.fill, 1)}" stroke="${colors(props.theme, props.fill, 0)}" stroke-width="${props.strokeWidth}" stroke-linejoin="${props.strokeLinejoin}"/><path d="M17 28H31C31 28 33.6275 30.6725 36 31.4286C37.4872 31.9025 40 32 40 32C40 32 38.5806 32.7747 37.6 33.1429C36.3597 33.6085 34 34 34 34H24H14C14 34 11.6403 33.6085 10.4 33.1429C9.41937 32.7747 8 32 8 32C8 32 10.5128 31.9025 12 31.4286C14.3725 30.6725 17 28 17 28Z" fill="${colors(props.theme, props.fill, 1)}" stroke="${colors(props.theme, props.fill, 0)}" stroke-width="${props.strokeWidth}" stroke-linejoin="${props.strokeLinejoin}"/><path d="M18 7.42857C20.4505 6.29809 24 4 24 4C24 4 27.5495 6.29809 30 7.42857C30.7716 7.78453 32 8.28571 32 8.28571C32 8.28571 31.2736 8.84176 30.8 9.14286C30.1825 9.53544 29 10 29 10H24H19C19 10 17.8175 9.53544 17.2 9.14286C16.7264 8.84176 16 8.28571 16 8.28571C16 8.28571 17.2284 7.78453 18 7.42857Z" fill="${colors(props.theme, props.fill, 1)}" stroke="${colors(props.theme, props.fill, 0)}" stroke-width="${props.strokeWidth}" stroke-linejoin="${props.strokeLinejoin}"/><path d="M21 10V16" stroke="${colors(props.theme, props.fill, 0)}" stroke-width="${props.strokeWidth}" stroke-linecap="${props.strokeLinecap}" stroke-linejoin="${props.strokeLinejoin}"/><path d="M27 10V16" stroke="${colors(props.theme, props.fill, 0)}" stroke-width="${props.strokeWidth}" stroke-linecap="${props.strokeLinecap}" stroke-linejoin="${props.strokeLinejoin}"/><path d="M19 22V28" stroke="${colors(props.theme, props.fill, 0)}" stroke-width="${props.strokeWidth}" stroke-linecap="${props.strokeLinecap}" stroke-linejoin="${props.strokeLinejoin}"/><path d="M29 22V28" stroke="${colors(props.theme, props.fill, 0)}" stroke-width="${props.strokeWidth}" stroke-linecap="${props.strokeLinecap}" stroke-linejoin="${props.strokeLinejoin}"/><path d="M16 34V44H32V34" stroke="${colors(props.theme, props.fill, 0)}" stroke-width="${props.strokeWidth}" stroke-linecap="${props.strokeLinecap}" stroke-linejoin="${props.strokeLinejoin}"/></svg>`
	});
</script>